<template>
  <el-popover v-model="visible" placement="bottom" trigger="hover" width="250" :disabled="disabled">
    <div slot="reference" class="picker-container">
      <svg-icon v-if="innerValue != ''" :name="innerValue" />
      <i v-else class="el-icon-plus" />
    </div>
    <el-input
      v-if="false"
      v-model="element.search"
      size="mini"
      placeholder="请输入搜索关键词"
      prefix-icon="el-icon-search"
      clearable
    />
    <div class="list-icon">
      <span
        v-for="(item, index) in elementIconCurrentList"
        :key="index"
        class="list-icon-item"
        @click="choose(getRealIcon(item))"
      >
        <svg-icon :name="getRealIcon(item)" />
      </span>
    </div>
    <el-pagination
      small
      layout="prev, pager, next"
      :current-page.sync="element.currentPage"
      :page-size="element.pageSize"
      :total="elementIconList.length"
      :pager-count="5"
    />
  </el-popover>
</template>

<script>
import elementIcon from "./element.json";

export default {
  name: "IconPicker",
  props: {
    value: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      visible: false,
      element: {
        search: "",
        icons: elementIcon,
        pageSize: 20,
        currentPage: 1,
      },
      innerValue: "",
    };
  },
  computed: {
    elementIconList() {
      let list = this.element.icons;
      if (this.element.search !== "") {
        list = list.filter((item) => {
          return item.indexOf(this.element.search) >= 0;
        });
      }
      return list;
    },
    elementIconCurrentList() {
      return this.elementIconList.slice(
        (this.element.currentPage - 1) * this.element.pageSize,
        (this.element.currentPage - 1) * this.element.pageSize + this.element.pageSize,
      );
    },
  },
  watch: {
    value: {
      handler(newValue) {
        this.innerValue = newValue;
      },
      immediate: true,
    },
    innerValue(newValue) {
      this.$emit("input", newValue);
    },
  },
  methods: {
    getRealIcon(item) {
      return item.indexOf("ic-") != -1 ? item : `el-icon-${item}`;
    },
    choose(val) {
      this.innerValue = val;
      this.visible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-tabs {
  margin-top: -10px;

  ::v-deep .el-tabs__nav-scroll {
    text-align: center;

    .el-tabs__nav {
      display: inline-block;
      float: none;
      margin: 0 auto;

      .el-tabs__item {
        padding: 0 12px;
      }
    }
  }
}

.picker-container {
  width: 40px;
  height: 40px;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
  background: rgb(219 219 219 / 0.979);
  border: 1px dashed #dcdfe6;
  border-radius: 5px;
  transition: 0.3s;

  &:hover {
    border-color: #909399;
    border-style: solid;
  }

  i {
    font-size: 24px;
    color: #606266;
    vertical-align: middle;
  }
}

.list-icon {
  .list-icon-item {
    display: inline-block;
    padding: 2px 8px 6px;
    margin-right: 3px;
    margin-bottom: 3px;
    font-size: 24px;
    cursor: pointer;
    background: rgb(219 219 219 / 0.979);
    border: 1px solid #dcdfe6;
    transition: 0.3s;

    &:nth-child(5n + 5) {
      margin-right: 0;
    }

    &:hover {
      color: #409eff;
      background-color: #ecf5ff;
      border-color: #c5e1fe;
    }

    i {
      vertical-align: middle;
    }
  }
}

.el-input {
  margin-bottom: 12px;
}

.style-choose {
  margin-top: 5px;
  text-align: center;
}

.el-pagination {
  margin-top: 5px;
  text-align: center;
}

.svg-icon {
  display: inline !important;
  position: relative;
  top: 3px;
  font-size: 24px;
}
</style>
